<template id="infoList">
    <div>
        <div class="infoList mgt0">
            <ul>
                <li v-for="item in infoList" class="white_bg">
                    <!-- 电子券消息 -->
                    <div v-if="item.coupon">
                        <div class="info_icon coupons_info">
                            <div class="info_tag" v-show="item.coupon.msgFlag == 'unread' "><span>{{item.coupon.msgCount}}</span></div>
                            <i class="icon iconfont icon-lishidianziquan-"></i>
                        </div>
                        <a href="javascript:void(0);" @click="infoDetail('/infoDetail/coupon','coupon')">
                            <div class="info_list_con">
                                <div class="info_list_tit">
                                    <span>{{item.coupon.crtTime | endtimeStamp}}</span>
                                    电子券消息
                                </div>
                                <div class="info_list_text">
                                    {{item.coupon.msgContent || ''}}
                                </div>
                            </div>
                        </a>
                    </div>
                    <!-- 订单消息 -->
                    <div v-if="item.transaction">
                        <div class="info_icon order_info">
                            <div class="info_tag" v-show="item.transaction.msgFlag == 'unread' "><span>{{item.transaction.msgCount}}</span></div>
                            <i class="icon iconfont icon-dingdanxiaoxi-"></i>
                        </div>
                        <a href="javascript:void(0);" @click="infoDetail('/infoDetail/transaction','transaction')">
                            <div class="info_list_con">
                                <div class="info_list_tit">
                                    <span>{{item.transaction.crtTime | endtimeStamp}}</span>
                                    订单消息
                                </div>
                                <div class="info_list_text">
                                    {{item.transaction.msgContent || ''}}
                                </div>
                            </div>
                        </a>
                    </div>
                    <!-- 评论 -->
                    <div v-if="item.comment">
                        <div class="info_icon comment_info">
                            <div class="info_tag" v-show="item.comment.msgFlag == 'unread' "><span>{{item.comment.msgCount}}</span></div>
                            <i class="icon iconfont icon-daipinglunxiaoxi-"></i>
                        </div>
                        <a href="javascript:void(0);" @click="infoDetail('/infoDetail/comment','comment')">
                            <div class="info_list_con">
                                <div class="info_list_tit">
                                    <span>{{item.comment.crtTime | endtimeStamp}}</span>
                                    评论
                                </div>
                                <div class="info_list_text">
                                    {{item.comment.msgContent || ''}}
                                </div>
                            </div>
                        </a>
                    </div>
                    <!-- 钱包消息 -->
                    <div v-if="item.wallet">
                        <div class="info_icon comment_info">
                            <div class="info_tag" v-show="item.wallet.msgFlag == 'unread' "><span>{{item.wallet.msgCount}}</span></div>
                           <img style="width: 3rem;height: 3rem;" src="../../images/walletIcon.png"/>
                        </div>
                        <a href="javascript:void(0);" @click="infoDetail('/infoDetail/wallet','wallet')">
                            <div class="info_list_con">
                                <div class="info_list_tit">
                                    <span>{{item.wallet.crtTime | endtimeStamp}}</span>
                                    钱包消息
                                </div>
                                <div class="info_list_text">
                                    {{item.wallet.msgContent || ''}}
                                </div>
                            </div>
                        </a>
                    </div>
                    <!-- 过期提醒 -->
                    <div v-if="item.expired">
                        <div class="info_icon overdue_info">
                            <div class="info_tag" v-show="item.expired.msgFlag == 'unread' "><span>{{item.expired.msgCount}}</span></div>
                            <i class="icon iconfont icon-guoqitixingxiaoxi-"></i>
                        </div>
                        <a href="javascript:void(0);" @click="infoDetail('/expiredReminder','expired')">
                            <div class="info_list_con">
                                <div class="info_list_tit">
                                    <span>{{item.expired.crtTime | endtimeStamp}}</span>
                                    过期提醒
                                </div>
                                <div class="info_list_text">
                                    {{item.expired.msgContent || ''}}
                                </div>
                            </div>
                        </a>
                    </div>
                    <!-- 我的券友 -->
                    <div v-if="item.friend">
                        <div class="info_icon friend_info">
                            <div class="info_tag" v-show="item.friend.msgFlag == 'unread' "><span>{{item.friend.msgCount}}</span></div>
                            <i class="icon iconfont icon-wodequanyouxiaoxi-"></i>
                        </div>
                        <a href="javascript:void(0);" @click="infoDetail('/newFriend','friend')">
                        <div class="info_list_con">
                            <div class="info_list_tit">
                                <span>{{item.friend.crtTime | endtimeStamp}}</span>
                                我的券友
                            </div>
                            <div class="info_list_text">
                                {{item.friend.msgContent || ''}}
                            </div>
                        </div>
                        </a>
                    </div>
                    <!-- 系统消息 -->
                    <div v-if="item.system" @click="jumpSystem">
                        <div class="info_icon sys_info">
                        	<div class="info_tag" v-show="item.system.msgCount>0"><span>{{item.system.msgCount}}</span></div>
                            <i class="icon iconfont icon-xitongxiaoxi-"></i>
                        </div>
                        <div class="info_list_con">
                            <div class="info_list_tit">
                                <span>{{item.system.crtTime | strDate}}</span>
                                系统消息
                            </div>
                            <div class="info_list_text">
                                {{item.system.msgContent || ''}}
                            </div>
                        </div>
                    </div>
                    <!-- 系统消息2 -->
                    <div v-if="item.rule" @click="jumpSystem">
                        <div class="info_icon sys_info">
                            <i class="icon iconfont icon-xitongxiaoxi-"></i>
                        </div>
                        <div class="info_list_con">
                            <div class="info_list_tit">
                                <span>{{item.rule.crtTime | strDate}}</span>
                                系统消息
                            </div>
                            <div class="info_list_text">
                                {{item.rule.msgContent || ''}}
                            </div>
                        </div>
                    </div>
                    <!-- 其他消息 -->
                    <div v-if="item.other">
                        <div class="info_icon sys_info">
                            <div class="info_tag" v-show="item.other.msgFlag == 'unread' "><span>{{item.other.msgCount}}</span></div>
                            <i class="icon iconfont icon-daipinglunxiaoxi-"></i>
                        </div>
                        <a href="javascript:void(0);" @click="infoDetail('/otherInfo/other','other')">
                            <div class="info_list_con">
                                <div class="info_list_tit">
                                    <span>{{item.other.crtTime | strDate}}</span>
                                    其他消息
                                </div>
                                <div class="info_list_text">
                                    {{item.other.msgContent || ''}}
                                </div>
                            </div>
                        </a>
                    </div>
                </li>
                <li class="lastLi"></li>
            </ul>
        </div>
        <div v-if="noInfo" class="noInfo"><img src="../../images/noList.png"><span>暂无消息</span></div>
    </div>
</template>
<script>
    import getData from '../../service/getData.js'
    import getData2 from '../../service/getData2.js'
    import * as types from '../../vuex/types.js'
    import { mapState } from 'vuex'
    import { Toast } from 'mint-ui'
    export default {
        data(){
            return{
                noInfo:false,
                system:'',
                listInfo:'',
                infoList:''
            }
        },
        created:async function(){
            var me=this;
            // 消息中心
            var rep =  await getData.myInfoList({},me.userInfo.usrId);
            if(rep.respCode=='00'){
                me.listInfo=rep.content;
                me.infoList=rep.content.msg;

            }else{
                Toast({
                    message: rep.errorInfo,
                    duration: 1000
                });
            }

            if (!me.listInfo) {
                console.log(me.noInfo)
                me.noInfo = true;
            }else{
                me.noInfo = false;
            }
        },
        computed:{
            ...mapState({
                    userInfo:state => state.user.userInfo,
            })
        },
        methods:{
            infoDetail:function(path,type){
                let me =this;
                getData.msgRead({method:'post',data:{type:type}},me.userInfo.usrId).then(rep => {
                    // console.info(JSON.stringify(rep));
                });
                this.$router.push({path:path})
            },
            msgRead:function(){

            },
            jumpSystem:function(){
               this.$router.push({path:'/systemDetail'})
            }
        }
    }
</script>
<style scoped>
    .infoList {
        margin-top: 0.5rem;
    }
    .mgt0{margin-top: 0;}
    .infoList li {
        min-height: 5rem;
        border-bottom: 1px solid #f0f0f0;
        /*background: #fff;*/
        position: relative;
        padding-bottom: .4rem;
    }
    .infoList li a{color:#333;display: block;height: 100%;min-height: 5rem;}
    .coupons_info{background: -webkit-linear-gradient(35deg, #4ea0ec, #14c1fa);}
    .order_info{background: -webkit-linear-gradient(35deg, #e5ab1c, #f1bf2a);}
    .comment_info{background: -webkit-linear-gradient(35deg, #ff6d31, #fe8439);}
    .overdue_info{background: -webkit-linear-gradient(35deg, #ed5355, #fd6f54);}
    .friend_info{background: -webkit-linear-gradient(35deg, #78b93b, #a1dd49);}
    .sys_info{background: -webkit-linear-gradient(35deg, #6886f8, #658eff);}
    .info_icon {
        height: 3rem;
        width: 3rem;
        line-height: 3rem;
        text-align: center;
        float: left;
        border-radius: .2rem;
        margin: 1rem 0 0 1rem;
        position: relative;
        z-index: 2;
    }

    .info_tag {
        border-top: 1rem solid #ff3c66;
        border-left: 1rem solid #ff3c66;
        border-right: 1rem solid transparent;
        border-bottom: 1rem solid transparent;
        position: absolute;
        top: -.2rem;
        left: -.2rem;
        border-top-left-radius: .2rem;
        z-index: 3;
        filter: drop-shadow(.2rem .2rem .2rem rgba(0,0,0,.3))
    }

    .info_tag:before {
        content: "";
        right: -1.2rem;
        top: -1rem;
        border-bottom: .2rem solid #82051f;
        border-left: .2rem solid transparent;
        border-right: .2rem solid transparent;
        position: absolute;
    }

    .info_tag:after {
        content: "";
        left: -1.2rem;
        bottom: -1.2rem;
        border-bottom: .2rem solid transparent;
        border-left: .2rem solid transparent;
        border-top: .2rem solid transparent;
        border-right: .2rem solid #82051f;
        position: absolute;
    }

    .info_tag span {
        position: absolute;
        left: -1.4rem;
        top: -.9rem;
        font-size: .8rem;
        color: #fff;
        width: 2rem;
        text-align: center;
        display: block;
        font-family: Arial;
        z-index: 31;
        line-height: normal;
    }
    .info_icon .icon{font-size:1.6rem;color:#fff;}
    .info_list_con{overflow: hidden;padding: 0 .667rem;}
    .info_list_tit{font-size:1rem;margin-top: 1rem;}
    .info_list_tit span{float: right;font-size:1rem;color:#999;font-family: Arial;}
    .info_list_text{font-size:1rem;color:#999;line-height: 1.6rem;margin-top: .2rem;max-height: 3rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
    .info_mar_bot{padding-bottom: 2rem;}
    .lastLi{text-align:center;color:#666;line-height:5rem;}
</style>
